<template>
  <div class="home">
    <img src="@/assets/导航logo.png" class="nav-logo" alt="">
    <div class="home-title">Find the perfect gift, every time</div>
    <img src="@/assets/编组%2016.png" class="ad-img" />
<!--    <div class="swiper2">-->
<!--      <img  src="@/assets/编组%2016.png" class="animate2 swiper-img swiper-img1" />-->
<!--    </div>-->
    <div class="swiper swiper-container" id="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="@/assets/1.png" alt="">
        </div>
        <div class="swiper-slide">
          <img src="@/assets/2.png" alt="">
        </div>
        <div class="swiper-slide">
          <img src="@/assets/3.png" alt="">
        </div>
      </div>
    </div>
   <div style="padding: 0 48px;width: 100%;text-align: center;margin-top: 60px;margin-bottom: 80px">
     <el-button @click="toChat" class="home-button" style="height: 48px;border-radius: 8px" size="large" type="primary">CHOOSE A GIFT</el-button>
   </div>
  </div>
</template>
<script setup>
import {onMounted, ref} from 'vue'
import {useRouter} from "vue-router";

const router = useRouter()
const toChat = () => {
  router.push('/chat/message')
}
// 获取元素距离右侧的距离
function getDistanceToWindowRight(element) {
  let rect = element.getBoundingClientRect();
  let scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
  let clientWidth = document.documentElement.clientWidth;

  // 元素的右侧距离可视区域的距离
  return clientWidth - (rect.right - scrollLeft);
}
let clientWidth = ref(document.documentElement.clientWidth + 'px')
onMounted(() => {
  new Swiper ('#swiper', {
    direction: 'horizontal', // 垂直切换选项
    loop: true, // 循环模式选项
    initialSlide: 0,
    autoplay: 2000,
    slidesPerView : 'auto',
  })
})
</script>
<style lang="scss">
.home {
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url("~@/assets/h5_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  .swiper2 {
    width: 100%;
    overflow: hidden;
    display: none;
  }
  .nav-logo {
    position: absolute;
    width: 153px;
    height: 48px;
    top: 26px;
    left:64px;
  }
  .ad-img {
    width: 70%;
    max-width: 1160px;
  }
  .home-title  {
    font-family: Arial;
    font-size: 36px;
    color: rgba(0,0,0,0.85);
    text-align: center;
    font-weight: 500;
    margin-top: 140px;
    margin-bottom: 60px;
  }
  .home-button {
    width: 23%;
    min-width: 480px;
  }
  .swiper-container {
    display: none;

    .swiper-slide {
      width: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  @media (max-width: 768px) {
    .home-button {
      width: 23%;
      min-width: 100%;
    }
    .nav-logo {
      display: none;
    }
    .ad-img {
      display: none;
    }
    .swiper-container {
      display: initial;
    }

    .swiper2 {
      display: initial;
      position: relative;
      height: 50%;
      width: 100%;
      overflow: hidden;
      .swiper-img {
        height: 100%;
        position: absolute;
      }
      .animate {
        animation: move 10s linear;
      }
      .animate2 {
        animation: move2 10s linear;
        // 无限循环
        animation-iteration-count: infinite;
      }
      .swiper-img1 {
        left: 0;
      }
      .swiper-img2 {
        left: v-bind(clientWidth);
      }
    }
    .home-title  {
      font-family: Arial;
      font-size: 28px;
      color: rgba(0,0,0,0.85);
      text-align: center;
      font-weight: 500;
      margin-top: 40px;
      padding: 0 60px;
      margin-bottom: 60px;
    }

  }
  // 一个动画勇于展示一个图片的从右向左移动，当图片末尾离开最右侧时，新增一张图片至最右侧开始
  @keyframes move2 {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
}
</style>
